// reset
* {
  margin 0
  padding 0
}
html,body {
  position: relative
  height: 100%
}
// 整体config
.swiper-container {
  width: 100%
  height: auto
  background-color: #eee
}
.swiper-slide {
  text-align: center
  background-color: #fff
  background-size: contain
  background-position: center
  background-repeat: no-repeat
  .left,
  .right {
    float: left
    width: 50%
    height: 90%
  }
  .right{
    float: right
  }
}

// 换页按钮
.swiper-pagination-bullet {
  width: 20px
  height: 20px
  text-align: center
  line-height: 20px
  font-size: 12px
  color:#000
  opacity: 1
  background: rgba(0,0,0,0.2)
}
.swiper-pagination-bullet-active {
  color:#fff
  background: #007aff
}

// 第一页
.swiper-slide.loading{
  height: 50vh
  line-height: 50vh
}
// 第二页
.swiper-slide.editor{
  height: 99vh
}
.gallery {
  .swiper-slide {
    background-color: rgba(#fff, 0)
  }
  .gallery-top .swiper-wrapper .swiper-slide {
    height: 99%
  }
}
.gallery-top {
    height: 80%;
    width: 100%;
}
.gallery-thumbs {
  background-color: #CCC
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 99%;
    opacity: 0.4;
    border-width: 1px
    border-style: solid
    border-color: rgba(#fff, .2)

    &:hover {
      border-color: rgba(gray, 1)
    }
}
.gallery-thumbs .swiper-slide-active {
    opacity: 1;
}

.form {
  height: 100%

  .swiper-container {
    height: 100%

    .swiper-slide {
      height: 100%
      display: flex
      flex-direction: column
      .title,
      h1 {
        flex-basis: 2em
        line-height: 2em
      }
      .cover,
      div {
        flex-grow: 1
        background-size: contain
        background-repeat: no-repeat
        background-position: center center
      }
      .button,
      .button_noimg {
        align-self: center
        font-size: 1.5em
        line-height: 1.7em
        min-width: 3.5em
        margin-right: 1em
        border: 1px solid #000
        border-radius: 10%/20%
        flex-grow 0
      }
      .dilan {
        display: flex
        flex-direction: row
        flex-grow: 0
        justify-content: space-around
        align-self: center
        font-size: 1.5em
        line-height: 1em
        width: 90%
        height: 3em
        margin-right: 1em

        .color_last_button,
        .button,
        .addButton,
        .submit {
        align-self: center
        font-size: 1em
        line-height: 1.4em
        height: 1.7em
        min-width: 6em
        padding: 0 .6em
        box-sizing: border-box
        border: 1px solid #000
        border-radius: 4px
        box-sizing: border-box
        flex-grow 0
        }
      }
      textarea#banquan,
      textarea#jianjie,
      textarea.color {
        width 90%
        border 0px
        padding-right 2em
        box-sizing content-box
        height 100%
      }

      // 元数据填写
      .MetaList{
        flex-grow: 1

        input {
          width 80%
          text-indent 1em
          display block
          margin .4em auto
          line-height 2.4em
        }
      }

      // 目录
      .contentList {
        flex-grow 1

        form{
          height 100%

          .contentItemWrap {
            height 50vh
            overflow auto

            input {
              width 80%
              text-indent 1em
              display block
              margin .4em auto
              line-height 2.4em
            }
          }
          &>input {
            height 2em
          }
        }
      }
    }
  }
}
// 第三页: 下载预定
.swiper-slide.download{
  height: 50vh
  line-height: 50vh
}
